<route lang="json5" type="page">
{
  layout: 'default',
  style: {
    navigationBarTitleText: '待派件',
  },
}
</route>

<template>
  <view class="min-h-screen bg-gray-50">
    <!-- 顶部状态卡片 -->
    <view class="flex gap-6 mb-8 px-4 mt-4 items-center justify-center">
      <view
        v-for="status in statusList"
        :key="status.key"
        class="w-20 h-20 rounded-2xl flex flex-col items-center justify-center"
        :class="activeStatus === status.key ? 'bg-violet-500' : 'bg-blue-50'"
        @click="activeStatus = status.key"
        style="cursor: pointer"
      >
        <image :src="status.img" class="w-8 h-8" style="width: 64rpx; height: 64rpx"></image>
        <text class="text-xs" :class="activeStatus === status.key ? 'text-white' : 'text-gray-600'">
          {{ status.label }}
        </text>
      </view>
    </view>

    <!-- 物品列表 -->
    <view class="space-y-3">
      <view class="px-4 mb-4" v-for="locker in itemList" :key="locker.id">
        <view class="text-base font-medium mb-3">{{ locker.building }}</view>
        <view
          class="bg-gray-50 rounded-lg p-4 mb-3 flex items-center"
          v-for="item in locker.cabinets"
          :key="item.id"
        >
          <view class="bg-white rounded-full p-2">
            <image
              src="https://kuaidi.trio.pub/upload/img/20250329/20250329051656174323981675589.png"
              alt=""
              class="w-8 h-8"
            />
          </view>
          <view class="flex-1 ml-3">
            <view class="text-base">{{ item.floor }}房</view>

            <view class="text-gray-400 text-sm mt-1">
              <text>待派件:{{ item.order_count.entered }}件</text>

              <text class="ml-3">待寄件:{{ item.order_count.not_entered }}件</text>
            </view>
          </view>
          <view class="text-gray-400">
            <uni-icons type="right" size="16"></uni-icons>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { ref, watch, onMounted } from 'vue'
import { getAllOrderLists } from '@/service/index/foo'

const statusList = [
  {
    key: '7',
    label: '服务中心',
    img: 'https://kuaidi.trio.pub/upload/uniapp/delivery/shangjia.png',
  },
  {
    key: '8',
    label: '已送达',
    img: 'https://kuaidi.trio.pub/upload/uniapp/delivery/songjian.png',
  },
  {
    key: '9',
    label: '已取件',
    img: 'https://kuaidi.trio.pub/upload/uniapp/delivery/box01.png',
  },
]

const activeStatus = ref('7')
const itemList = ref<any[]>([])

const fetchData = async () => {
  try {
    const res = await getAllOrderLists({
      status: activeStatus.value,
    })
    // 假设接口返回数据在 res.data
    itemList.value = (res.data || []) as any[]
  } catch (error) {
    itemList.value = []
  }
}

watch(activeStatus, () => {
  fetchData()
})

onMounted(() => {
  fetchData()
})
</script>

<style scoped>
page {
  background-color: #f9fafb;
}
</style>
